<template>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
                <h3>工单信息</h3>
            </div>

            <el-descriptions class="margin-top" title="" :column="1" size="" border>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    问题描述
                </template>
                {{ feedbackInfo.description }}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    投诉类型
                </template>
                <el-tag>{{ feedbackInfo.feedbackType==1?"建议":"投诉" }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    投诉分类
                </template>
                <el-tag type="" style="background-color: #e54d42; color: white;" v-if="feedbackInfo.feedbackClassification == 1">卫生</el-tag>
                <el-tag type="" style="background-color: #f37b1d; color: white;" v-if="feedbackInfo.feedbackClassification == 2">噪音</el-tag>
                <el-tag type="" style="background-color: #fbbd08; color: white;" v-if="feedbackInfo.feedbackClassification == 3">服务态度</el-tag>
                <el-tag type="" style="background-color: #8dc63f; color: white;" v-if="feedbackInfo.feedbackClassification == 4">违建</el-tag>
                <el-tag type="" style="background-color: #39b54a; color: white;" v-if="feedbackInfo.feedbackClassification == 5">占用消防通道</el-tag>
                <el-tag type="" style="background-color: #1cbbb4; color: white;" v-if="feedbackInfo.feedbackClassification == 6">小区设施</el-tag>
                <el-tag type="" style="background-color: #0081ff; color: white;" v-if="feedbackInfo.feedbackClassification == 7">其他</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    处理进度
                </template>
                <el-tag type="" v-if="feedbackInfo.progress == 1"> 待分配工单 </el-tag>
                <el-tag type="info" v-if="feedbackInfo.progress == 2">待确认工单 </el-tag>
                <el-tag type="warning" v-if="feedbackInfo.progress == 3"> 待处理 </el-tag>
                <el-tag type="success" v-if="feedbackInfo.progress == 4"> 已完成 </el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    投诉图片
                </template>
                <el-image 
                    v-show="urls != ''"
                    style="width: 500px; height: 300px"
                    v-for="url in urls"
                    :key="url"
                    :src="url" 
                    :preview-src-list="urls"
                    fit="contain">
                </el-image>
                <!-- <el-avatar shape="square" style="width: 100px;height: 100px;" :src=" ownerinfo.face!=null?ownerinfo.face:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' "></el-avatar> -->
                </el-descriptions-item>
                
            </el-descriptions>
            </el-card>
</template>

<script>
export default {
    name:'feedbackInfo',
    data(){
        return{
            feedbackId:'',
            feedbackInfo:{},
            urls:[]
        }
    },
    mounted() {
        // 获取查询参数
        const feedbackId = this.$route.query.feedbackId;
        this.feedbackId = feedbackId
        console.log('feedbackId:', feedbackId);
        this.init()
    },
    activated(){
        const feedbackId = this.$route.query.feedbackId;
        this.feedbackId = feedbackId
        console.log('feedbackId:', feedbackId);
        this.init()
    },
    methods:{
        init(){
            this.$request.get("/feedback/feedbackInfoById",{
                params:{
                    feedbackId:this.feedbackId
                }
            }).then(res=>{
                this.feedbackInfo = res.data
                let str = res.data.images
                if(str == null){
                    return;
                }
                str = str.replace("[", "").replace("]", "")
                let arr = str.split(',');
                this.urls = arr
                console.log(this.urls)
            }).catch(err=>{
                console.error(err)
            })
        }
    }
}
</script>

<style>

</style>